<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
        Java-front-VUE-6-路由 - rulerLwx Blog
      </title>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    
    <meta name="theme-color" content="#000000" />
    
    <meta http-equiv="window-target" content="_top" />
    
    
    <meta name="description" content="ref-获取元素、组件引用 学习资料：https://www.bilibili.com/video/av50680998/?p=71 目的：不用" />
    <meta name="generator" content="Hugo 0.73.0 with theme pure" />
    <title>Java-front-VUE-6-路由 - rulerLwx Blog</title>
    
    
    <link rel="stylesheet" href="https://rulerLwx.gitee.io/css/style.min.c4bc7071f132c964c2116bca53b392933f377e5ca7b7051ed245187c621a2d3e.css">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/9.15.10/styles/github.min.css" async>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css" async>
    <meta property="og:title" content="Java-front-VUE-6-路由" />
<meta property="og:description" content="ref-获取元素、组件引用 学习资料：https://www.bilibili.com/video/av50680998/?p=71 目的：不用" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://rulerLwx.gitee.io/2020/07/java-front-vue-6-%E8%B7%AF%E7%94%B1/" />
<meta property="article:published_time" content="2020-07-01T18:58:47+08:00" />
<meta property="article:modified_time" content="2020-07-01T18:58:47+08:00" />
<meta itemprop="name" content="Java-front-VUE-6-路由">
<meta itemprop="description" content="ref-获取元素、组件引用 学习资料：https://www.bilibili.com/video/av50680998/?p=71 目的：不用">
<meta itemprop="datePublished" content="2020-07-01T18:58:47&#43;08:00" />
<meta itemprop="dateModified" content="2020-07-01T18:58:47&#43;08:00" />
<meta itemprop="wordCount" content="3334">



<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Java-front-VUE-6-路由"/>
<meta name="twitter:description" content="ref-获取元素、组件引用 学习资料：https://www.bilibili.com/video/av50680998/?p=71 目的：不用"/>

    <!--[if lte IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
      <![endif]-->

    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
      <![endif]-->
  </head>

  
  

  <body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage"><header class="header" itemscope itemtype="http://schema.org/WPHeader">
    <div class="slimContent">
      <div class="navbar-header">
        <div class="profile-block text-center">
          <a id="avatar" href="https://gitee.com/rulerLwx" target="_blank">
            <img class="img-circle img-rotate" src="https://rulerLwx.gitee.io/avatar.png" width="200" height="200">
          </a>
          <h2 id="name" class="hidden-xs hidden-sm">rulerLwx</h2>
          <h3 id="title" class="hidden-xs hidden-sm hidden-md">thinking...</h3>
          <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i>Guangzhou, China</small>
        </div><div class="search" id="search-form-wrap">
    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="Search" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i
                        class="icon icon-search"></i></button>
            </span>
        </div>
        <div class="ins-search">
            <div class="ins-search-mask"></div>
            <div class="ins-search-container">
                <div class="ins-input-wrapper">
                    <input type="text" class="ins-search-input" placeholder="Type something..."
                        x-webkit-speech />
                    <button type="button" class="close ins-close ins-selectable" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="ins-section-wrapper">
                    <div class="ins-section-container"></div>
                </div>
            </div>
        </div>
    </form>
</div>
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
        <ul class="nav navbar-nav main-nav">
            <li class="menu-item menu-item-home">
                <a href="/">
                    <i class="icon icon-home-fill"></i>
                  <span class="menu-title">Home</span>
                </a>
            </li>
            <li class="menu-item menu-item-archives">
                <a href="/posts/">
                    <i class="icon icon-archives-fill"></i>
                  <span class="menu-title">Archives</span>
                </a>
            </li>
            <li class="menu-item menu-item-categories">
                <a href="/categories/">
                    <i class="icon icon-folder"></i>
                  <span class="menu-title">Categories</span>
                </a>
            </li>
            <li class="menu-item menu-item-tags">
                <a href="/tags/">
                    <i class="icon icon-tags"></i>
                  <span class="menu-title">Tags</span>
                </a>
            </li>
            <li class="menu-item menu-item-about">
                <a href="/about/">
                    <i class="icon icon-cup-fill"></i>
                  <span class="menu-title">About</span>
                </a>
            </li>
        </ul>
      </nav>
    </div>
  </header>

<aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">Board</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">enjoy~
            </div>
        </div>
    </div>
</div>

      <div class="widget">
    <h3 class="widget-title"> Categories</h3>
    <div class="widget-body">
        <ul class="category-list">
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-framework/" class="category-list-link">java-framework</a><span class="category-list-count">38</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-front-end/" class="category-list-link">java-front-end</a><span class="category-list-count">11</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-se/" class="category-list-link">java-se</a><span class="category-list-count">21</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-senior/" class="category-list-link">java-senior</a><span class="category-list-count">4</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/linux/" class="category-list-link">linux</a><span class="category-list-count">13</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/tools/" class="category-list-link">tools</a><span class="category-list-count">1</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/%E6%8A%80%E6%9C%AF%E6%9D%82%E7%83%A9/" class="category-list-link">技术杂烩</a><span class="category-list-count">4</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/" class="category-list-link">数据库</a><span class="category-list-count">15</span></li>
        </ul>
    </div>
</div>
      <div class="widget">
    <h3 class="widget-title"> Tags</h3>
    <div class="widget-body">
        <ul class="tag-list">
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/jvm/" class="tag-list-link">jvm</a><span
                    class="tag-list-count">1</span></li>
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/%E5%A4%9A%E7%BA%BF%E7%A8%8B/" class="tag-list-link">多线程</a><span
                    class="tag-list-count">2</span></li>
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/" class="tag-list-link">网络编程</a><span
                    class="tag-list-count">3</span></li>
            
        </ul>

    </div>
</div>
      
<div class="widget">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget-body">
        <ul class="recent-post-list list-unstyled no-thumbnail">
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E4%B8%80%E6%89%B9%E9%87%8F%E7%A7%BB%E5%8A%A8%E9%87%8D%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6/" class="title">自己动手（一）——批量移动、重命名文件</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-27 17:50:02 &#43;0800 CST" itemprop="datePublished">2020-07-27</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E5%85%B3%E4%BA%8Einteger%E7%9A%84-128~127%E7%BC%93%E5%AD%98/" class="title">关于Integer的 -128~127缓存</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-11 16:56:21 &#43;0800 CST" itemprop="datePublished">2020-07-11</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/" class="title">跨域问题</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-08 22:41:12 &#43;0800 CST" itemprop="datePublished">2020-07-08</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" class="title">个人博客搭建</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-05 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-05</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/centos/" class="title">CentOS-</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-01 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-01</time>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
  </div>
</aside>

    
    
<aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    <h4 class="toc-title">Catalogue</h4>
    <nav id="toc" class="js-toc toc">

    </nav>
  </div>
</aside>
<main class="main" role="main"><div class="content">
  <article id="-" class="article article-type-" itemscope
    itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      <h1 itemprop="name">
  <a
    class="article-title"
    href="/2020/07/java-front-vue-6-%E8%B7%AF%E7%94%B1/"
    >Java-front-VUE-6-路由</a
  >
</h1>

      <div class="article-meta">
        
<span class="article-date">
  <i class="icon icon-calendar-check"></i>&nbsp;
<a href="https://rulerLwx.gitee.io/2020/07/java-front-vue-6-%E8%B7%AF%E7%94%B1/" class="article-date">
  <time datetime="2020-07-01 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-01</time>
</a>
</span>
<span class="article-category">
  <i class="icon icon-folder"></i>&nbsp;
  <a class="article-category-link" href="/categories/java-front-end/"> Java-front-end </a>
</span>

        <span class="post-comment"><i class="icon icon-comment"></i>&nbsp;<a href="/2020/07/java-front-vue-6-%E8%B7%AF%E7%94%B1/#comments"
            class="article-comment-link">Comments</a></span>
		<span class="post-wordcount hidden-xs" itemprop="wordCount">Word Count: 3334words</span>
		<span class="post-readcount hidden-xs" itemprop="timeRequired">Read Count: 7minutes </span>
      </div>
    </div>
    <div class="article-entry marked-body js-toc-content" itemprop="articleBody">
      <h1 id="ref-获取元素组件引用">ref-获取元素、组件引用</h1>
<p>学习资料：https://www.bilibili.com/video/av50680998/?p=71</p>
<p>目的：不用像<code>document.getElementById('#id')</code>一样操作dom</p>
<p>想获取哪个元素或标签，就在哪个元素上加上 <code>ref=&quot;唯一的名字&quot;</code>，然后<code>this.$refs.xx.值</code></p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;ref-获取dom元素和组件&lt;/title&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/bootstrap.css&quot;/&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;获取元素&quot; @click=&quot;getElement&quot; ref=&quot;mybtn&quot;/&gt;
        &lt;h3 id=&quot;myh3&quot; ref=&quot;myh3&quot;&gt;这是一个H3&lt;/h3&gt;

        &lt;!--子组件--&gt;
        &lt;login ref=&quot;mylogin&quot;&gt;&lt;/login&gt;
    &lt;/div&gt;
    &lt;template id=&quot;temp1&quot;&gt;
        &lt;h1 ref=&quot;sunh1&quot;&gt;这是一个登录组件&lt;/h1&gt;
    &lt;/template&gt;
    &lt;script&gt;
        var com1 = {
            template: '#temp1',
            data: function () {
                return {
                    msg:'sum msg'
                }
            },
            methods: {
                show(){
                    console.log(&quot;子组件 show()&quot;)
                }
            }
        }
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                getElement(){
                    // 访问元素（值）
                    console.log(this.$refs.myh3.innerText);
                    // 访问子组件的数据、方法
                    console.log(this.$refs.mylogin.msg);
                    this.$refs.mylogin.show();
                    
                    // 父组件可以拿到子组件元素
                    console.log(this.$refs.mylogin.$refs.sunh1.innerText);
                }
            },
            components:{
                login: com1
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>在父组件中获取父组件的元素、子组件的 data/method。在子组件中的元素一样可以定义 ref。</p>
<p>思路：</p>
<p><img src="https://gitee.com/leafsing/pic/raw/master/img/20200709015121.png" alt=""></p>
<p>总结：使用 ref 的方式比从父组件传递方法给子组件的方法更容易使用。——20190929</p>
<p>代码：https://github.com/wolf-lea/heima-vue/blob/master/day04/04.ref-%E8%8E%B7%E5%8F%96dom%E5%85%83%E7%B4%A0%E5%92%8C%E7%BB%84%E4%BB%B6.html</p>
<h1 id="路由">路由</h1>
<p>学习资料：https://www.bilibili.com/video/av50680998/?p=72</p>
<p>官网：</p>
<ul>
<li><a href="https://github.com/vuejs/vue-router">https://github.com/vuejs/vue-router</a></li>
<li><a href="https://router.vuejs.org/zh/">https://router.vuejs.org/zh/</a></li>
</ul>
<h2 id="什么是路由">什么是路由</h2>
<ul>
<li>后端路由：前端的所有资源都对应后台的一个 URL 地址，请求时，通过后台进行分发</li>
<li>前端路由：<strong>单页面</strong>内容之间跳转，锚点，通过 hash(#号) 实现</li>
</ul>
<h2 id="基本使用">基本使用</h2>
<p>安装方式跟 vue-resource 一样</p>
<ul>
<li>导入 vue-router.js 后，在 window 全局对象中，就有了一个路由构造函数 VueRouter</li>
<li>new 路由对象的时候，可以传递一个配置<strong>对象</strong>，也叫【路由匹配规则】</li>
</ul>
<p>步骤：</p>
<ol>
<li>导包</li>
<li>创建模板对象</li>
<li>new VueRouter ，写路由规则</li>
<li>将 vueroute 跟 vm 关联</li>
<li>在 #app 中使用 router-view 占位符，在路径前加上 # 号（使用 a 标签时要加 #，使用 router-link 标签则不用）</li>
</ol>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;路由-基本使用&lt;/title&gt;
    &lt;!--导入包，注意顺序--&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;../js/vue-router.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;a href=&quot;#/login&quot;&gt;登录&lt;/a&gt;
        &lt;a href=&quot;#/register&quot;&gt;注册&lt;/a&gt;
        &lt;!-- vue-router 提供的占位符，根据路由规则，匹配到的元素就会展示在这里--&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
    &lt;script&gt;
        // 模板对象
        var login = {
            template:'&lt;h2&gt;这是登录组件&lt;/h2&gt;'
        }
        var register = {
            template:'&lt;h2&gt;这是注册组件&lt;/h2&gt;'
        }
        var vueRouter = new VueRouter({
            // 路由匹配规则
            routes:[
                // 有两个固定属性，path：路由地址，component：对应的组件对象（不是名称）
                {path:'/login',component:login}, // 注意，如果定成 component:'login' ，是错误的
                {path:'/register',component: register}
            ]
        });
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            // 将路由对象关联到 vm
            router:vueRouter
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>另外，可以使用 router-link 标签代替上面的 a 标签，还可以通过 tag=&rdquo;&rdquo; 指定渲染成什么标签，如</p>
<pre><code class="language-html">        &lt;router-link to=&quot;/login&quot; tag=&quot;span&quot;&gt;登录2&lt;/router-link&gt;
        &lt;router-link to=&quot;/register&quot;&gt;注册2&lt;/router-link&gt;
</code></pre>
<h2 id="路由重定向">路由重定向</h2>
<p>可以在路由规则里使用重定向，跳转到指定页面</p>
<pre><code class="language-html">        var vueRouter = new VueRouter({
            routes:[
                {path:'/login',component:login}, 
                {path:'/register',component: register},
                {path:'/',redirect:'/login'} // 重定向
            ]
        });
</code></pre>
<h2 id="选中的路由高亮显示">选中的路由高亮显示</h2>
<p>方法一：重写系统默认的 css 类即可</p>
<p>思路：</p>
<p><img src="https://gitee.com/leafsing/pic/raw/master/img/20200709015724.png" alt=""></p>
<p>重写 css 类：</p>
<pre><code class="language-html">    &lt;style&gt;
        .router-link-active {
            color: red;
            font-weight: 800;
            font-size: 80px;
            font-style: italic;
            text-decoration: underline;
        }

    &lt;/style&gt;
</code></pre>
<p>效果：</p>
<p><img src="https://gitee.com/leafsing/pic/raw/master/img/20200709015814.png" alt=""></p>
<p>方法二：自定义 css 类名称</p>
<p>默认 css <strong>类的名称</strong>是可以修改的，参考：https://router.vuejs.org/zh/api/#active-class</p>
<pre><code class="language-js">        var vueRouter = new VueRouter({
            routes:[],
            linkActiveClass:myactive // myactive 将会替换上面的 .router-link-active
        });
</code></pre>
<h2 id="路由-动画">路由-动画</h2>
<p>步骤：</p>
<ol>
<li>用 transition 将占位符包裹起来</li>
<li>写四个 css 类</li>
</ol>
<pre><code class="language-html">        &lt;transition mode=&quot;out-in&quot;&gt;
            &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/transition&gt;
</code></pre>
<h2 id="路由传参-通过query获取get请求参数">路由传参-通过query获取get请求参数</h2>
<ul>
<li>在使用 router-link 标签 to 属性时，可以在请求地址后面加上请求参数，如：<code>&lt;router-link to=&quot;/login?id=10&quot;&gt;登录&lt;/router-link&gt;</code></li>
<li>使用<code>this.$route.query.xx</code>拿到 get 请求参数的值，<code>this</code> 关键字可以省略</li>
</ul>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;路由规则中定义参数&lt;/title&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;../js/vue-router.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;router-link to=&quot;/login?id=10&amp;name=zs&quot;&gt;登录&lt;/router-link&gt;
        &lt;router-link to=&quot;/register&quot;&gt;注册&lt;/router-link&gt;

        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var login = {
            template:'&lt;h2&gt;这是登录组件：{{this.$route.query.id}} --- {{$route.query.name}}&lt;/h2&gt;',
            // 组件生命周期钩子函数
            // 可以打印 this.$route ，据此提供思路来取值
            created(){
                console.log(this.$route.query.id);
            }
        }
        var register = {
            template:'&lt;h2&gt;这是注册组件&lt;/h2&gt;'
        }
        var vueRouter = new VueRouter({
            routes:[
                {path:'/login',component:login},
                {path:'/register',component: register}
            ]
        });
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            router:vueRouter// 如果属性名、属性值都是 router，可以简写成 router
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h2 id="路由传参-通过params方式restful">路由传参-通过params方式（restful）</h2>
<p>restful 风格传参</p>
<ol>
<li>路由规则的路径的后面跟<code>/：xx</code></li>
<li>在 router-link 标签 to 属性路径后面带上 rest 风格的参数</li>
<li>通过 this.$route.params.xx 取得参数值</li>
</ol>
<p>思路：打印 this.$route（<code>console.log(this.$route)</code>） ，观察 params 属性</p>
<p><img src="https://gitee.com/leafsing/pic/raw/master/img/20200709015848.png" alt=""></p>
<p>示例代码：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;路由传参-params&lt;/title&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;../js/vue-router.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;router-link to=&quot;/login/10&quot;&gt;登录&lt;/router-link&gt;
        &lt;router-link to=&quot;/register/03/ls&quot;&gt;注册&lt;/router-link&gt;

        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var login = {
            template:'&lt;h2&gt;这是登录组件 {{$route.params.id}}&lt;/h2&gt;',
        }
        var register = {
            template:'&lt;h2&gt;这是注册组件 {{$route.params.id}}---{{$route.params.name}}&lt;/h2&gt;'
        }
        var vueRouter = new VueRouter({
            routes:[
                {path:'/login/:id',component:login},
                {path:'/register/:id/:name',component: register}
            ]
        });
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            router:vueRouter,
            created(){
                console.log(this.$route)
                console.log(this.$route.params.id)
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h2 id="路由嵌套-children">路由嵌套-children</h2>
<p>组件里面有子组件，点击子组件，父组件不消失</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;children-路由嵌套&lt;/title&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;../js/vue-router.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;router-link to=&quot;/account&quot;&gt;Account 组件&lt;/router-link&gt;

        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
    &lt;template id=&quot;temp1&quot;&gt;
        &lt;div&gt;
            &lt;h1&gt;这是 Account 组件&lt;/h1&gt;
            &lt;!--这里要加上 /account 前缀--&gt;
            &lt;router-link to=&quot;/account/login&quot;&gt;登录&lt;/router-link&gt;
            &lt;router-link to=&quot;/account/register&quot;&gt;注册&lt;/router-link&gt;
        &lt;/div&gt;
    &lt;/template&gt;
    &lt;script&gt;
        var account = {
            template:'#temp1',
        }
        var login = {
            template:'&lt;h3&gt;登录&lt;/h3&gt;',
        }
        var register = {
            template:'&lt;h3&gt;注册&lt;/h3&gt;',
        }
        var router = new VueRouter({
            routes:[
                {
                    path:'/account',
                    component:account,
                    children:[
                        // path 不加斜线
                        {path:'login',component:login},
                        {path:'register',component:register}
                    ]
                }
            ]
        });
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            router:router
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果图：</p>
<p><img src="https://gitee.com/leafsing/pic/raw/master/img/20200709015930.png" alt=""></p>
<h2 id="路由-命名视图-实现经典布局">路由-命名视图-实现经典布局</h2>
<p>思路：</p>
<ul>
<li>给 router-view 标签命名</li>
<li>在路由规则中使用 components 属性（注意，比 component 多了 s）</li>
<li>然后使用 css 控制 router-view 的布局</li>
</ul>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;命名视图-实现经典布局&lt;/title&gt;
    &lt;script src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;../js/vue-router.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        html,body {
            margin: 0;
            padding: 0;
        }
        h1 {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }
        .header {
            background-color: orange;
            height: 80px;
        }
        .container {
            display: flex;
            height: 600px;
        }
        .left {
            background-color: lightgreen;
            flex: 2;
        }
        .main {
            background-color: lightpink;
            flex: 8;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;router-view name=&quot;left&quot;&gt;&lt;/router-view&gt;
            &lt;router-view name=&quot;main&quot;&gt;&lt;/router-view&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var header = {
            template:'&lt;h1 class=&quot;header&quot;&gt;这是 HEADER&lt;/h1&gt;'
        }
        var leftBox = {
            template:'&lt;h1 class=&quot;left&quot;&gt;这是 leftBox 侧边栏&lt;/h1&gt;'
        }
        var mainBox = {
            template:'&lt;h1 class=&quot;main&quot;&gt;这是 mainBox 主体区域&lt;/h1&gt;'
        }
        var router = new VueRouter({
            routes:[
                {
                    path:'/',
                    components:{
                        default: header,
                        left: leftBox,
                        main:mainBox
                    }
                }
            ]
        });
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            router
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果图：</p>
<p><img src="https://gitee.com/leafsing/pic/raw/master/img/20200709020010.png" alt=""></p>
<h2 id="附件-相关文章">附件-相关文章</h2>
<ul>
<li><a href="http://www.cnblogs.com/joyho/articles/4430148.html">URL中的hash（井号）</a></li>
</ul>

    </div>
    <div class="article-footer">
<blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    <li class="post-copyright-link hidden-xs">
      <strong>Permalink: </strong>
      <a href="https://rulerLwx.gitee.io/2020/07/java-front-vue-6-%E8%B7%AF%E7%94%B1/" title="Java-front-VUE-6-路由" target="_blank" rel="external">https://rulerLwx.gitee.io/2020/07/java-front-vue-6-%E8%B7%AF%E7%94%B1/</a>
    </li>
    <li class="post-copyright-license">
      <strong>License：</strong><a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN</a>
    </li>
  </ul>
</blockquote>

<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://gitee.com/rulerLwx" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="https://rulerLwx.gitee.io/avatar.png" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://gitee.com/rulerLwx" target="_blank"><span class="text-dark">rulerLwx</span><small class="ml-1x">thinking...</small></a></h3>
        <div>Good Good Study, Day Day Up~</div>
      </div>
    </figure>
  </div>
</div>
    </div>
  </article>
<section id="comments">
    <div id="vcomments"></div>
</section>

</div><nav class="bar bar-footer clearfix" data-stick-bottom>
    <div class="bar-inner">
        <ul class="pager pull-left">
            <li class="prev">
                <a href="https://rulerLwx.gitee.io/2020/07/java-front-vue-7-%E6%A1%88%E4%BE%8B/" title="Java-front-VUE-7-案例"><i
                        class="icon icon-angle-left"
                        aria-hidden="true"></i><span>&nbsp;&nbsp;Older</span></a>
            </li>
            <li class="next">
                <a href="https://rulerLwx.gitee.io/2020/07/java-front-vue-5-%E7%BB%84%E4%BB%B6/"
                    title="Java-front-VUE-5-组件"><span>Newer&nbsp;&nbsp;</span><i
                        class="icon icon-angle-right" aria-hidden="true"></i></a>
            </li>
            
            <li class="toggle-toc">
                <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false"
                    title="Catalogue" role="button">
                    <span>[&nbsp;</span><span>Catalogue</span>
                    <i class="text-collapsed icon icon-anchor"></i>
                    <i class="text-in icon icon-close"></i>
                    <span>]</span>
                </a>
            </li>
        </ul>
        <div class="bar-right">
            <div class="share-component" data-sites="weibo,qq,wechat"
                data-mobile-sites="weibo,qq,qzone"></div>
        </div>
    </div>
</nav>

</main><footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
<ul class="social-links">
    <li><a href="https://gitee.com/rulerLwx" target="_blank" title="gitee" data-toggle=tooltip data-placement=top >
            <i class="icon icon-gitee"></i></a></li>
    <li><a href="https://github.com/wolf-lea" target="_blank" title="github" data-toggle=tooltip data-placement=top >
            <i class="icon icon-github"></i></a></li>
</ul>
  <div class="copyright">
    &copy;2020  -
    2020
    <div class="publishby">
        Theme by <a href="https://github.com/xiaoheiAh" target="_blank"> xiaoheiAh </a>base on<a href="https://github.com/xiaoheiAh/hugo-theme-pure" target="_blank"> pure</a>.
    </div>
  </div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
            showMathMenu: false, //disables context menu
            tex2jax: {
            inlineMath: [ ['$','$'], ['\\(','\\)'] ]
           }
    });
</script>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/highlight.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/python.min.js" defer></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/javascript.min.js" defer></script><script>
    hljs.configure({
        tabReplace: '    ', 
        classPrefix: ''     
        
    })
    hljs.initHighlightingOnLoad();
</script>
<script src="https://rulerLwx.gitee.io/js/application.min.bdeb64b910570b6c41badc6a05b7afb0c8ad9efd8525de3c7257d59e786326a3.js"></script>
<script src="https://rulerLwx.gitee.io/js/plugin.min.51ff8c7317566f82259170fa36e09c4493adc9b9378b427a01ad3f017ebac7dd.js"></script>

<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: 'Posts',
                PAGES: 'Pages',
                CATEGORIES: 'Categories',
                TAGS: 'Tags',
                UNTITLED: '(Untitled)',
            },
            ROOT_URL: 'https:\/\/rulerLwx.gitee.io',
            CONTENT_URL: 'https:\/\/rulerLwx.gitee.io\/searchindex.json ',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script type="text/javascript" src="https://rulerLwx.gitee.io/js/insight.min.a343cd9a5a7698336b28ef3a7c16a3a1b1d2d5fb17dc8ed04022bbe08cc5459073a15bdafa3a8a58cdd56080784bdd69fa70b1ae8597565c799c57ed00f0e120.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
<script>
    tocbot.init({
        
        tocSelector: '.js-toc',
        
        contentSelector: '.js-toc-content',
        
        headingSelector: 'h1, h2, h3',
        
        hasInnerContainers: true,
    });
</script>

<script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine"></script>
<script type="text/javascript">
    var GUEST = ['nick', 'mail', 'link'];
    var meta = 'nick,mail';
    meta = meta.split(',').filter(function (item) {
        return GUEST.indexOf(item) > -1;
    });
    new Valine({
        el: '#vcomments',
        verify: null ,
        notify: null ,
        appId: 'IyAB0PSPRazTPDxitO1ddQ7O-gzGzoHsz',
        appKey: '5rBJTq4KidYF33eXwvRVhtEH',
        placeholder: 'enjoy~',
        avatar: 'mm',
        meta: meta,
        pageSize: '10' || 10,
        visitor: false 
});
</script>

  </body>
</html>
